<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title><spring:message code="index.page.title" /></title>
		<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/script/jqueryui/1.10.4/css/redmond/jquery-ui-1.10.4.custom.min.css" />

		<script type="text/javascript" src="<%=request.getContextPath() %>/script/jquery/1.9.1/jquery.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/script/jqueryui/1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>
		
		<!-- bxSlider Javascript file -->
		<script src="<%=request.getContextPath() %>/script/bxslider/jquery.bxslider.min.js"></script>
		<!-- bxSlider CSS file -->
		<link href="<%=request.getContextPath() %>/script/bxslider/jquery.bxslider.css" rel="stylesheet" />

		<!-- add the jQWidgets framework -->
	    <link rel="stylesheet" href="<%=request.getContextPath() %>/script/jqwidgets/styles/jqx.base.css" type="text/css" />
	    <link rel="stylesheet" href="<%=request.getContextPath() %>/script/jqwidgets/styles/jqx.arctic.css" type="text/css" />
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxcore.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxbuttons.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxscrollbar.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxlistbox.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxrating.js"></script>

    	<script type="text/javascript">
	    	var requestContextPath = "<%=request.getContextPath() %>";
	    	var productInCard = [
									<c:forEach var="cardItem" items="${sessionScope.cardItems}">
									<c:out value="${cardItem.key}" />,
									</c:forEach>
									0
		    	                    ];
	    </script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/script/main.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/script/css/main.css" />
	</head>
	<body>
		
		<header>
			<table class="headertable">
				<tr>
					<td class="logotd">
						<div class="logo">
							Logo
						</div>
					</td>
					<td class="headersidebartd">
						<div class="headersidebar">
							<a href="aboutus" class="aboutcontact">AboutUs</a> <a href="contactus" class="aboutcontact">Contact</a>
							<select class="language">
								<option value="en_US">English</option>
								<option value="en_US">French</option>
							</select>
						</div>
					</td>
				</tr>
			</table>
		</header>
		
		<section>
			<table class="sectionmaintable">
				<tr>
					<td class="productssidebartd">
						<div class="cardmain">
							<img src="<%=request.getContextPath() %>/script/css/images/card.png" /><span class="mycard">MyCard(<span class="cardItemCount">0</span>)</span>
							<div style="overflow: hidden;">
							<div id="card">
								  No Items Added
							</div>
							</div>
							<div class="orderNowFromCardDiv">
								<input type="button" class="orderNowFromCard" name="orderNow" value="Order Now">
							</div>
						</div>
					</td>
					<td class="productstd">
						<div class="wrapper">
							<ul class="bxslider">
							<% 
								int i = 0;
								int j = 0;
							%>
							<c:forEach var="product" items="${products}" varStatus="productIteratorStatus">
								<%if(i == 0) { %>
								<li class="bxsliderli">
									<table class="bxslidertable">
								<%} %>
									<%if(j == 0) { %>	
										<tr>
									<%} %>	
											<td>
												<div class="productDivBox">
													<div class="productDivBoxImage">
														<a href="product/${product.id}">
															<img src="${product.productImagesUrl[0]}" /></a>
															<c:out value="${product.name}" />
														</a>
													</div>
													<div class="productDivBoxButton">
														<input type="button" class="addToCard" name="addToCard" value="Add To Card" product-id="${product.id}" product-name="" product-img-url="${product.productImagesUrl[0]}">
														<input type="button" class="orderNow" name="orderNow" value="Order Now" product-id="${product.id}">
													</div>
												</div>
											</td>
									<% j++; %>
									<%
										if(j % 4 == 0) {
											j = 0;
									%>		
										</tr>
									<%} %>	
								<% i++; %>		
								<%
									if(i % 12 == 0) {
										i = 0;
								%>		
									</table>
								</li>
								<%} %>
							</c:forEach>
								<%
									if(i > 0 && i < 12) {
								%>		
									</table>
								</li>
								<%} %>
							</ul>
						</div>	
						
					</td>
				</tr>
			</table>
		</section>
		
		<footer>
			<div class="footerdiv">
				Thanks to <a href="https://code.google.com/p/onlineshopping4j">onlineshopping4j</a>
			</div>
		</footer>
	</body>
</html>